<template>
    <el-dialog
            title="加载地图服务"
            style="margin-left: 0;height: 100%;width:97%"
            :visible.sync="MapServiceVisible"
            v-dialogDrag
            id="mapServiceDialog">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%">
            <el-tab-pane label="系统服务" name="systemMapService">
                <el-container style="height: 100%;">
                    <el-header style="height: 40px">
                        <el-input v-model="sysSearch" placeholder="请输入搜索关键词"
                                  style="width: 30%;line-height:1;float: right"></el-input>
                    </el-header>
                    <el-main style="height:100%;padding: 0">
                        <el-table :data="systemTableMapService" :show-header="false"
                                  style="max-height: 400px;overflow: auto;">
                            <el-table-column
                                    width="450"
                                    white-space="pre-wrap"
                                    :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <p style="font-size:14px; line-height:15px"><b>服务名称:</b> {{ scope.row.msname }}
                                        </p>
                                        <p style="font-size:14px; line-height:15px"><b>服务类型:</b> {{ scope.row.mstype }}
                                        </p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="270"
                                    white-space="pre-wrap"
                                    :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <p style="font-size:14px; line-height:15px"><b>关键词:</b> {{ scope.row.mskeyword
                                            }}</p>
                                        <p style="font-size:14px; line-height:15px"><b>发布时间:</b> {{
                                            scope.row.mspublictime }}
                                        </p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <i class="el-icon-circle-plus" scope="scope" size="tiny"
                                       @click="systemHandleEdit(scope.$index, scope.row)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer style="height: 40px;padding: 10px 20px">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :page-size="pageSize"
                                :current-page="pageNo"
                                layout="prev,pager,next"
                                :total="totalCount"
                                style="text-align: center">
                        </el-pagination>
                    </el-footer>
                </el-container>
            </el-tab-pane>
            <el-tab-pane label="个人服务" name="personalMapService">
                <el-container style="height: 100%;">
                    <el-header style="height: 40px">
                        <el-input v-model="personalSearch" placeholder="请输入搜索关键词"
                                  style="width: 30%;line-height:1;float: right"></el-input>
                    </el-header>
                    <el-main style="height:100%;max-height: 300px;overflow: auto;padding: 0">
                        <el-table :data="personalTableMapService" :show-header="false">

                            <el-table-column
                                    width="450"
                                    white-space="pre-wrap"
                                    :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <p style="font-size:14px; line-height:15px"><b>服务名称:</b> {{ scope.row.msname }}
                                        </p>
                                        <p style="font-size:14px; line-height:15px"><b>服务类型:</b> {{ scope.row.mstype }}
                                        </p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    width="270"
                                    white-space="pre-wrap"
                                    :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <p style="font-size:14px; line-height:15px"><b>关键词:</b> {{ scope.row.mskeyword
                                            }}</p>
                                        <p style="font-size:14px; line-height:15px"><b>发布时间:</b> {{
                                            scope.row.mspublictime }}
                                        </p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <i class="el-icon-circle-plus" scope="scope" size="tiny"
                                       @click="systemHandleEdit(scope.$index, scope.row)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer style="height:40px;padding: 8px 20px">
                        <el-pagination
                                @size-change="handleSizeChange1"
                                @current-change="handleCurrentChange1"
                                :page-size="pageSize1"
                                :current-page="pageNo1"
                                layout="prev,pager,next"
                                :total="totalCount1"
                                style="text-align: center">
                        </el-pagination>
                    </el-footer>
                </el-container>
            </el-tab-pane>
            <el-tab-pane label="外部服务" name="externalMapService">
                <div style="padding: 10px">
                    <span style="margin-left: 4.3%">服务名称：</span>
                    <el-input v-model="externalServiceName" style="width:210px"></el-input>
                </div>
                <div style="padding: 10px">
                    <span style="margin-left: 4.3%">服务类型：</span>
                    <el-input v-model="externalServiceType" style="width:210px;"></el-input>
                </div>
                <div style="padding: 10px">
                    <span>服务地址(URL)：</span>
                    <el-input v-model="externalServiceURL" style="width:430px"></el-input>
                </div>
                <div style="float: right">
                    <el-button style="background-color:#50bfff; color:white; border-color: #50bfff;"
                               @click="addExternalService">加载
                    </el-button>
                    <el-button @click="MapServiceVisible = false">取消</el-button>
                </div>

            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script>
    export default {
        name: "mapsevice1",
        data() {
            return {
                userid: "",
                MapServiceVisible: false,
                adminRole: "admin",
                activeName: "systemMapService",
                pageSize: 5,
                totalCount: 0,
                pageNo: 1,
                pageSize1: 5,
                totalCount1: 0,
                pageNo1: 1,
                systemTableMapService: [],
                personalTableMapService: [],
                externalServiceName: "",
                externalServiceType: "",
                externalServiceURL: "",
                personalSearch: "",
                sysSearch: ""
            }
        },
        watch: {
            personalSearch(newVal, oldVal) {
                if (newVal !== oldVal && newVal !== "") {
                    this.queryPersonalService(newVal);
                }
                if (newVal !== "") {
                    this.getPersonalService;
                }

            },
            sysSearch(newVal, oldVal) {
                if (newVal !== oldVal && newVal !== "") {
                    this.querySysService(newVal);
                }
                if (newVal !== "") {
                    this.getSysService();
                }
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getSysService();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.getSysService();
            },
            handleSizeChange1(val) {
                this.pageSize1 = val;
                this.getPersonalService();
            },
            handleCurrentChange1(val) {
                this.pageNo1 = val;
                this.getPersonalService();
            },
            getPersonalService() {
                let that = this;
                let url = this.$URL.getPersonalService + this.pageSize1 + "&pageNo=" + this.pageNo1;
                this.$axios.get(url).then(res => {
                    if (res.code == 200) {
                        let table = [];
                        if (res.body.totalCount > 0) {
                            for (let item of res.body.result) {
                                item = {
                                    msname: item.name,
                                    mskeyword: item.keyword,
                                    mstype: item.type,
                                    mspublictime: item.publicTime,
                                    total: item
                                };
                                table.push(item);
                            }
                            that.totalCount1 = res.body.totalCount;
                            that.personalTableMapService = table;
                        }
                    } else {
                        that.$message({
                            type: 'warning',
                            message: "数据获取失败！"
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error("未获取数据！");
                })
            },
            getSysService() {
                let that = this;
                let url = this.$URL.getSysService + this.pageSize + "&pageNo=" + this.pageNo;
                this.$axios.get(url).then(res => {
                    if (res.code == 200) {
                        let table = [];
                        if (res.body.totalCount > 0) {
                            for (let item of res.body.result) {
                                item = {
                                    msname: item.name,
                                    mskeyword: item.keyword,
                                    mstype: item.type,
                                    mspublictime: item.publicTime,
                                    total: item
                                };
                                table.push(item);
                            }
                            that.systemTableMapService = table;
                            that.totalCount = res.body.totalCount;
                        }
                    } else {
                        that.$message({
                            type: 'warning',
                            message: "数据获取失败！"
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error("未获取数据！");
                })
            },
            querySysService(query) {
                let that = this;
                let url = this.$URL.searchSysService + query + "?pageSize=" + this.pageSize + "&pageNo=" + this.pageNo;
                this.$axios.get(url).then(res => {
                    if (res.code == 200) {
                        let table = [];
                        if (res.body.totalCount > 0) {
                            for (let item of res.body.result) {
                                item = {
                                    msname: item.name,
                                    mskeyword: item.keyword,
                                    mstype: item.type,
                                    mspublictime: item.publicTime,
                                    total: item
                                };
                                table.push(item);
                            }
                            that.systemTableMapService = table;
                        }
                    } else {
                        that.$message({
                            type: 'warning',
                            message: "数据获取失败！"
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error("未获取数据！");
                })

            },
            queryPersonalService(query) {
                let that = this;
                let url = this.$URL.searchPersonalService + query + "?pageSize=" + this.pageSize + "&pageNo=" + this.pageNo;
                this.$axios.get(url).then(res => {
                    if (res.code == 200) {
                        let table = [];
                        if (res.body.totalCount > 0) {
                            for (let item of res.body.result) {
                                item = {
                                    msname: item.name,
                                    mskeyword: item.keyword,
                                    mstype: item.type,
                                    mspublictime: item.publicTime,
                                    total: item
                                };
                                table.push(item);
                            }
                            that.personalTableMapService = table;
                        }
                    } else {
                        that.$message({
                            type: 'warning',
                            message: "数据获取失败！"
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error("未获取数据！");
                })
            },
            //外部服务点击确定加载地图
            addExternalService() {
//加载wms和wtms服务
                let that = this;
                this.$globalConstant.map.addLayer({
                    "id": that.externalServiceName,
                    "type": 'raster',
                    "source": {
                        "type": 'raster',
                        "tiles": [that.externalServiceURL],
                        "tileSize": 256,
                    },
                }, 'gl-draw-polygon-fill-inactive.cold');
                let item = {
                    ifShow: false,
                    styleShow: false,
                    ifCheck: false,
                    //外部服务不可编辑地图样式
                    fieldType: "external",
                    layerId: that.externalServiceName,
                    layerName: that.externalServiceName,
                    layerType:'raster',
                    layerUrl: that.externalServiceURL
                }
                this.$globalConstant.layerInfo.data.push(item)
            },
            //点击+号，加载地图
            systemHandleEdit(index, row) {
                let that = this;
                let url = this.$URL.addMapUrl + row.total.id + '/0';
                let params = {
                    "fieldType": "",
                    "colorMap": {},
                    "min": 1,
                    "max": 20,
                    "colorRampIndex": -1,
                    "stops": 1,
                    "startColor": 1,
                    "endColor": 1
                };

                this.$axios.post(url, params).then(res => {
                    if (res.code === 200) {
                        if (res.body.colorMap !== undefined) {
                            for (let item33 in res.body.colorMap) {
                                console.log(item33);
                                res.body.colorMap[item33] = "#" + res.body.colorMap[item33].substring(0, 6)
                            }
                        }
                        // res.body.startColor = "#a3d1e5";
                        // res.body.endColor = "#eeead8";
                        that.$axios.get(that.$URL.getBands + row.total.id).then(bandRes => {
                            if (bandRes.code === 200) {
                                let fields = [];
                                for (let i = 0; i < bandRes.body.length; i++) {
                                    let field = {
                                        label: bandRes.body[i].fieldName,
                                        value: bandRes.body[i].bandIndex
                                    };
                                    fields.push(field);
                                }
                                console.log(fields);
                                row.total.totalBand = fields;
                                row.total.band = '0';
                                res.body.startColor = "#" + res.body.startColor.substring(0, 6);
                                res.body.endColor = "#" + res.body.endColor.substring(0, 6);
                                let mapInfo = {
                                    color: res.body,
                                    info: row.total
                                };
                                debugger
                                that.$Bus.$emit('mapInfo', mapInfo);
                            } else {
                                that.$message({
                                    type: 'warning',
                                    message: bandRes.message
                                })
                            }
                        }).catch(function (error) {
                            console.log(error);
                            that.$message.error("未获取到bd数据！")
                        });
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error("未获取到数据！")
                });
                // this.$Bus.$emit('mapInfo', row.total);
                this.MapServiceVisible = false;
            }
        },
        created() {
            // this.getPersonalService(this.pageNo1, this.pageSize1, this.personalSearch, this.userid);
            // this.getSysService(this.pageNo, this.pageSize, this.sysSearch, this.adminRole);
            let that = this;
            this.$Bus.$on("mapServiceVisible", res => {
                if (res !== undefined) {
                    that.MapServiceVisible = res.visible;
                    that.getSysService();
                    that.getPersonalService();
                }
            });
        }
    }
</script>

<style>
    #mapServiceDialog .el-dialog__body {
        padding-bottom: 10px;
    }
</style>